﻿
@{
    ViewData["Title"] = "系统日志";
}

@await Component.InvokeAsync("Channel")
<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>系统日志</legend>
            </fieldset>
            <ul id="log" class="layui-timeline">
                
            </ul>
        </div>
        <div class="layui-col-md4">
            <!--今日推荐-->
            @await Component.InvokeAsync("RecommendArticle")
            <!--本周热议-->
            @await Component.InvokeAsync("HotArticle")
        </div>
    </div>
</div>

@section scripts{
    <script>
        layui.use(['jquery','flow'], function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#log' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('@Url.Content("~/SysUpdateLog/List/")' + page, function (res) {
                        //假设你的列表返回在data集合中
                        layui.each(res.data, function (index, item) {
                            var html = '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">' + item.publishDate+'</h3>'+item.content+'</div></li>';
                            lis.push(html);
                        });

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //count为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.count);
                    });
                }
            });
        });
    </script>
}